<template>
  <view class="page-content">
    <view class="search-box">
      <custom-input placeholder="搜索" background="#FFFFFF"></custom-input>
    </view>
    <view class="sort-box">
      <view style="flex: 1">
        <sort-tab
          sortText="距离排序"
          @sortChanged="sortDistanceChanged"
        ></sort-tab>
      </view>
    </view>

    <scroll-view
      scroll-y="true"
      style="flex: 1; overflow: hidden"
      @scrolltolower="addRandomData"
    >
      <template v-if="dataLists.length === 0 && status == 'nomore'">
        <empty></empty>
      </template>
      <template v-else>
        <view class="cards-list">
          <view class="mt-16">
            <doctor-card :lists="dataLists"></doctor-card>
          </view>
          <u-loadmore :status="status" margin-top="20" />
        </view>
      </template>
    </scroll-view>
    <view class="add-btn"
      ><add-btn link="/pages/index/cw-doctor/add-doctor/add-doctor"></add-btn
    ></view>
    <u-select
      v-model="showSex"
      mode="single-column"
      :list="sexlist"
      @confirm="handlesexconfirm"
    ></u-select>
  </view>
</template>

<script>
import { listDoctor } from '@/api/cwbl.js'
import doctorCard from 'components/index/cw-doctor/doctor-card.vue'
import customInput from 'components/common/custom-input.vue'
import sortTab from 'components/index/cmbz/sort-tab.vue'
import addBtn from 'components/index/add-fixed-btn.vue'
import utils from '../../../../utils/util.js'
export default {
  data() {
    return {
      showSex: false,
      sexlist: [
        {
          value: 0,
          label: '男',
        },
        {
          value: 1,
          label: '女',
        },
      ],
      status: 'loadmore',
      dataLists: [],
      filterParmas: {
        searchValue: '',
        nowLat: 0,
        nowLng: 0,
        sortFiled: '',
        sortType: '',
        pageNum: 1,
        pageSize: this.$config.pageSize,
      },
    }
  },
  onShow() {
    this.status = 'loadmore'
    this.filterParmas.pageNum = 1
    this.pageNum = 1
    this.dataLists = []
    this.$forceUpdate()
    utils
      .getLocationInfo()
      .then((res) => {
        this.filterParmas.nowLat = res.latitude
        this.filterParmas.nowLng = res.longitude
        this.getDoctorLists()
      })
      .catch((err) => {
        this.getDoctorLists()
      })
  },
  methods: {
    getDoctorLists() {
      listDoctor(this.filterParmas).then((res) => {
        if (this.status == 'loadmore') {
          this.status = 'loadmore'
          ++this.filterParmas.pageNum
          this.dataLists.push(...res.rows)
          this.dataLists.forEach((item) => {
            item.distance =
              item.distance != null && item.distance != '--'
                ? Number(item.distance).toFixed(2)
                : '--'
          })
          if (this.dataLists.length >= res.total) {
            this.status = 'nomore'
          } else {
            this.status = 'loadmore'
          }
        }
      })
    },
    addRandomData() {
      if (this.status === 'loadmore') this.getDoctorLists()
    },
    sortPriceChanged(value) {
      this.filterParmas.pageNum = 1
      this.dataLists = []
      this.status = 'loadmore'
      this.$forceUpdate()
      this.filterParmas.sortType = value
      this.filterParmas.sortFiled = 'price'
      this.getDoctorLists()
    },
    sortDistanceChanged(value) {
      this.filterParmas.pageNum = 1
      this.dataLists = []
      this.status = 'loadmore'
      this.$forceUpdate()
      this.filterParmas.sortType = value
      this.filterParmas.sortFiled = 'distance'
      this.getDoctorLists()
    },
    sortTimeChanged(value) {
      this.filterParmas.pageNum = 1
      this.dataLists = []
      this.status = 'loadmore'
      this.$forceUpdate()
      this.filterParmas.sortType = value
      this.filterParmas.sortFiled = 'createTime'
      this.getDoctorLists()
    },

    handleToBZSDetail(id) {
      uni.navigateTo({
        url: '/pages/index/cw-doctor/doctor-detail/doctor-detail?id=' + id,
      })
    },
  },
  components: {
    doctorCard,
    customInput,
    sortTab,
    addBtn,
  },
}
</script>

<style lang="scss" scoped>
.page-content {
  height: 100%;
  background-color: #f6f6f6;
  padding: 0 32rpx;
  display: flex;
  flex-direction: column;
  position: relative;

  .search-box {
    padding: 16rpx 0 24rpx 0;
  }

  .sort-box {
    display: flex;
    justify-content: cneter;
    align-items: center;
    margin-bottom: 24rpx;
  }

  .cards-list {
    position: relative;

    .mt-16 {
      &:first-child {
        margin-top: 0;
      }
    }
  }

  .add-btn {
    position: absolute;
    bottom: 218rpx;
    right: 32rpx;
  }
}
</style>